<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  current: {
    type: Number,
    default: 0
  }
})

const tabList = ref([
  {
    pagePath: '/pages/index/index',
    iconPath: '/static/tabbar/home.png',
    selectedIconPath: '/static/tabbar/home-active.png',
    text: '首页'
  },
  {
    pagePath: '/pages/project/project-list',
    iconPath: '/static/tabbar/project.png',
    selectedIconPath: '/static/tabbar/project-active.png',
    text: '项目'
  },
  {
    pagePath: '/pages/bid/bid-publish',
    iconPath: '/static/tabbar/publish.png',
    selectedIconPath: '/static/tabbar/publish-active.png',
    text: '发布'
  },
  {
    pagePath: '/pages/chat/chat-list',
    iconPath: '/static/tabbar/message.png',
    selectedIconPath: '/static/tabbar/message-active.png',
    text: '消息'
  },
  {
    pagePath: '/pages/profile/profile',
    iconPath: '/static/tabbar/user.png',
    selectedIconPath: '/static/tabbar/user-active.png',
    text: '我的'
  }
])

const switchTab = (index, path) => {
  uni.switchTab({
    url: path
  })
}
</script>

<template>
  <view class="custom-tab-bar">
    <view class="tab-bar-border"></view>
    <view class="tab-bar-content">
      <view 
        v-for="(item, index) in tabList" 
        :key="index"
        class="tab-item"
        @tap="switchTab(index, item.pagePath)"
      >
        <view v-if="index === 2" class="publish-btn">
          <image :src="current === index ? item.selectedIconPath : item.iconPath" mode="aspectFit" />
        </view>
        <template v-else>
          <image :src="current === index ? item.selectedIconPath : item.iconPath" mode="aspectFit" />
          <text :class="{ active: current === index }">{{ item.text }}</text>
        </template>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  
  .tab-bar-border {
    background-color: rgba(0, 0, 0, 0.33);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1rpx;
    transform: scaleY(0.5);
  }
  
  .tab-bar-content {
    display: flex;
    width: 100%;
  }
  
  .tab-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    
    image {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 4rpx;
    }
    
    text {
      font-size: 20rpx;
      color: #666;
      &.active {
        color: #1d4ed8;
      }
    }
  }
  
  .publish-btn {
    width: 96rpx;
    height: 96rpx;
    background: #1d4ed8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -48rpx;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    
    image {
      width: 48rpx;
      height: 48rpx;
      margin: 0;
    }
  }
}
</style> 